<template>
    <swiper :options="swiperOption">
      <swiper-slide v-for="item of summ" :key="item.summoner_id">
        <div class="sw_box">
          <div class="sw_left">
            <img :src="'http://game.gtimg.cn/images/yxzj/img201606/summoner/'+item.summoner_id+'.jpg'">
          </div>
          <div class="sw_right">
            <h1>{{item.summoner_name}}</h1>
            <p>{{item.summoner_rank}}</p>
            <p>{{item.summoner_description}}</p>
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-scrollbar" slot="scrollbar"></div>
    </swiper>
</template>

<script>

  export default {
    name: 'Summoner',
    data() {
      return {
        summ: [],
        swiperOption: {
          scrollbar: '.swiper-scrollbar',
          hide: true
        }
      }
    },
    created() {
      this.getSummList()
    },
    methods: {
      getSummList() {
        this.$http('../../../static/json/summoner.json').then(this.getSummListSucc)
      },
      getSummListSucc(res) {
        const data = res.data
        this.summ = data
        console.log(data)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  >>>.swiper-slide {
    width: 100%;
  }
  >>>.el-collapse-item__content {
    padding-bottom: 5px;
  }
  .sw_left {
    float: left;
    margin-left: 5px;
  }
  .sw_right {
    height: 100%;
  }
  .sw_right h1, p {
    text-align: center;
  }
  .sw_right h1 {
    font-weight: bold;
    color: #dd6161;
  }
</style>
